Eesmise WebGL-i tekstuuride atlasgeneratsioon: Tekstuuride pakkimise optimeerimine

WebGL-arenduse maailmas on jõudlus ülimalt tähtis. Üks kriitiline tehnika renderdamise optimeerimiseks on tekstuuride atlasde kasutamine. Tekstuuride atlas ühendab mitu väiksemat tekstuuri üheks suuremaks pildiks. Sellel näiliselt lihtsal ideel võib olla sügav mõju teie rakenduse tõhususele, vähendades joonistuskutseid ja parandades üldist jõudlust. See artikkel sukeldub tekstuuride atlasde maailma, uurides nende eeliseid, tekstuuride pakkimise taga olevaid algoritme ja praktilisi kaalutlusi rakendamisel.

Mis on tekstuuride atlas?

Tekstuuride atlas, tuntud ka kui sprite-leht või pildisprite, on üks pilt, mis sisaldab mitut väiksemat tekstuuri. Kujutage seda ette hoolikalt korraldatud piltide kollaažina. Selle asemel, et iga üksikut tekstuuri eraldi laadida ja siduda, laadib teie WebGL-rakendus atlase korra ja seob selle. Seejärel kasutab see UV-koordinaate, et valida atlase konkreetne piirkond, mis vastab soovitud tekstuurile.

Näiteks 2D-mängus võib teil olla eraldi tekstuurid iga animatsiooniraami või kasutajaliidese (UI) erinevate elementide jaoks. Selle asemel, et iga nupp, ikoon ja tegelase sprite eraldi laadida, saate need kõik pakkida ühte tekstuuride atlasse.

Miks kasutada tekstuuride atlasid?

Tekstuuride atlasde kasutamise peamine eelis on joonistuskutsete vähendamine. Joonistuskutse on CPU poolt GPU-le esitatud renderdamistaotlus. Iga joonistuskutse tekitab lisakulusid, sealhulgas oleku muutusi (nt tekstuuride sidumine, shaderite seadistamine). Joonistuskutsete arvu vähendamine võib oluliselt parandada jõudlust, eriti piiratud töötlemisvõimsusega seadmetel, nagu mobiiltelefonid ja vanemad arvutid.

Siin on eeliste jaotus:

• Vähendatud joonistuskutsed: Vähem joonistuskutseid tähendab vähem CPU lisakulusid ja kiiremat renderdamist.
• Parem jõudlus: CPU-GPU suhtluse minimeerimisega suurendavad tekstuuride atlasid üldist jõudlust.
• Madalam mälukasutus: Kuigi atlas ise võib olla suurem kui mõned üksikud tekstuurid, võib tõhus pakkimine sageli vähendada kogu mälukasutust võrreldes paljude üksikute tekstuuride laadimisega koos mipmapidega.
• Lihtsustatud varade haldus: Ühe tekstuuride atlase haldamine on sageli lihtsam kui arvukate üksikute tekstuuride haldamine.

Näide: Mõelge lihtsale WebGL-mängule 100 erineva sprite'iga. Ilma tekstuuride atlaseta võiksite vajada kõigi sprite'ide renderdamiseks 100 joonistuskutset. Hästi pakitud tekstuuride atlasiga võiksite potentsiaalselt renderdada kõik 100 sprite'i ühe joonistuskutsega.

Tekstuuride pakkimisalgoritmid

Tekstuuride paigutamist atlasse nimetatakse tekstuuride pakkimiseks. Eesmärk on maksimeerida ruumi kasutamist atlas, minimeerides raisatud piirkondi ja vältides tekstuuride kattumist. Tekstuuride pakkimiseks on mitmeid algoritme, millel igaühel on oma tugevused ja nõrkused.

1. Giljotiiniga kasti pakkimine

Giljotiiniga kasti pakkimine on populaarne ja suhteliselt lihtne algoritm. See töötab, jagades saadaoleva ruumi rekursiivselt väiksemateks ristkülikuteks. Kui tekstuur tuleb paigutada, otsib algoritm sobivat ristkülikut, mis mahutaks tekstuuri. Kui sobiv ristkülik leitakse, paigutatakse tekstuur ja ristkülik jagatakse kaheks väiksemaks ristkülikuks (nagu giljotiiniga lõikamine).

Giljotiini algoritmi on mitu varianti, mis erinevad selle poolest, kuidas nad valivad jagatava ristküliku ja millises suunas seda jagada. Levinud jagamisstrateegiad hõlmavad:

• Parim lühikese külje sobivus: Valib ristküliku, mille lühim külg mahutab tekstuuri.
• Parim pika külje sobivus: Valib ristküliku, mille pikim külg mahutab tekstuuri.
• Parim pindala sobivus: Valib ristküliku, mille pindala on väikseim ja mis mahutab tekstuuri.
• Halvim pindala sobivus: Valib ristküliku, mille pindala on suurim ja mis mahutab tekstuuri.

Giljotiiniga kasti pakkimine on suhteliselt kiire ja lihtne rakendada, kuid see võib aeg-ajalt viia ebapiisava pakkimistõhususeni, eriti erineva suurusega tekstuuride puhul.

2. Horisontaaljoon pakendamine

Horisontaaljoon pakendamine säilitab "horisontaaljoone", mis kujutab pakendatud tekstuuride ülemist serva. Kui uus tekstuur tuleb paigutada, otsib algoritm horisontaaljoonelt madalaimat punkti, mis mahutaks tekstuuri. Kui tekstuur on paigutatud, värskendatakse horisontaaljoont, et peegeldada uut kõrgust.

Horisontaaljoon pakendamine on üldiselt tõhusam kui giljotiiniga kasti pakkimine, eriti erineva kõrgusega tekstuuride puhul. Selle rakendamine võib siiski olla keerulisem.

3. MaxRects kasti pakkimine

MaxRects kasti pakkimine jälgib vaba ristkülikute loendit kasti (atlas) sees. Kui uus tekstuur tuleb paigutada, otsib algoritm parimat sobivat vaba ristkülikut. Pärast tekstuuri paigutamist luuakse uued vabad ristkülikud, mis põhinevad äsja hõivatud ruumil.

Sarnaselt giljotiiniga on MaxRects erinevates variantides, mis põhinevad kriteeriumidel "parima" sobivuse valimiseks, nt parim lühikese külje sobivus, parim pika külje sobivus, parim pindala sobivus.

4. R-tree pakkimine

R-puu on ruumilise indekseerimise jaoks kasutatav puuandmestruktuur. Tekstuuride pakkimise kontekstis saab R-puud kasutada atlas sees oleva vaba ruumi tõhusaks otsimiseks. R-puu iga sõlm tähistab ristkülikukujulist piirkonda ja puu lehed tähistavad kas hõivatud või vabu piirkondi.

Kui tekstuur tuleb paigutada, läbib R-puu sobiva vaba piirkonna leidmiseks. Seejärel paigutatakse tekstuur ja R-puu värskendatakse, et kajastada uut hõivatusastet. R-puu pakkimine võib olla väga tõhus suurte ja keerukate atlasde puhul, kuid see võib olla ka arvutuslikult kallim kui lihtsamad algoritmid.

Tööriistad tekstuuride atlasde genereerimiseks

Tekstuuride atlasde genereerimise protsessi automatiseerimiseks on saadaval mitmeid tööriistu. Need tööriistad pakuvad sageli selliseid funktsioone nagu:

• Automaatne pakkimine: Tööriist paigutab tekstuurid atlasse automaatselt, kasutades ühte või mitut ülaltoodud algoritmi.
• Sprite-lehe eksport: Tööriist genereerib tekstuuride atlas pildi ja andmefaili (nt JSON, XML), mis sisaldab iga tekstuuri UV-koordinaate.
• Padi ja vahed: Tööriist võimaldab teil lisada tekstuuride vahele patju ja vahesid, et vältida lekkimisartefakte.
• Kahekordne suurusjärkude suurus: Tööriist saab automaatselt muuta atlas suurust kahekordseks suurusjärgu mõõtmeteks, mis on WebGL-i ühilduvuse jaoks sageli vajalik.
• Animatsioonitugi: Mõned tööriistad toetavad animatsiooni sprite-lehtede loomist.

Siin on mõned populaarsed tekstuuride atlasde genereerimise tööriistad:

• TexturePacker: Kaubanduslik tööriist, millel on lai valik funktsioone ja tugi erinevatele mängumootoritele.
• ShoeBox: Tasuta ja avatud lähtekoodiga tööriist lihtsa ja intuitiivse liidesega.
• Sprite Sheet Packer: Veel üks tasuta ja avatud lähtekoodiga tööriist, saadaval veebirakendusena.
• LibGDX TexturePacker: Tööriist, mis on spetsiaalselt loodud LibGDX mängude arendusraamistiku jaoks, kuid seda saab kasutada ka eraldiseisvalt.
• Kohandatud skriptid: Suurema kontrolli saamiseks võite kirjutada oma tekstuuride pakkimisskriptid, kasutades selliseid keeli nagu Python või JavaScript ja raamatukogusid nagu Pillow (Python) või canvas-raamatukogud (JavaScript).

Tekstuuride atlasde rakendamine WebGL-is

Pärast tekstuuride atlase ja vastava andmefaili genereerimist peate laadima atlase WebGL-i ja kasutama UV-koordinaate üksikute tekstuuride renderdamiseks.

Siin on selle protsessi üldine ülevaade:

1. Laadi tekstuuride atlas: Kasutage gl.createTexture(), gl.bindTexture(), gl.texImage2D() meetodeid, et laadida tekstuuride atlas pilt WebGL-i.
2. Partei andmefail: Laadige ja partei andmefail (nt JSON), mis sisaldab iga tekstuuri UV-koordinaate.
3. Loo verteksipuhver: Looge verteksipuhver, mis sisaldab teie nelikute vertekseid.
4. Loo UV-puhver: Looge UV-puhver, mis sisaldab iga verteksi UV-koordinaate. Neid UV-koordinaate kasutatakse tekstuuride atlase õige piirkonna valimiseks. UV-koordinaadid jäävad tavaliselt vahemikku 0,0 kuni 1,0, mis tähistavad vastavalt atlase vasak-ala ja parem-ülemist nurka.
5. Seadista verteksi atribuudid: Seadistage verteksi atribuudi näitajad, et öelda WebGL-ile, kuidas verteksi- ja UV-puhvrite andmeid tõlgendada.
6. Sidumistekstuur: Enne joonistamist siduge tekstuuride atlas, kasutades gl.bindTexture().
7. Joonista: Kasutage gl.drawArrays() või gl.drawElements(), et joonistada nelikud, kasutades UV-koordinaate, et valida tekstuuride atlase sobivad piirkonnad.

Näide (kontseptuaalne JavaScript):

            
// Eeldades, et olete atlase pildi laadinud ja JSON-andmed parteinud
const atlasTexture = loadTexture("atlas.png");
const atlasData = JSON.parse(atlasJson);

// Funktsioon sprite'i joonistamiseks atlasest
function drawSprite(spriteName, x, y, width, height) {
  const spriteData = atlasData[spriteName];
  const uvX = spriteData.x / atlasTexture.width;
  const uvY = spriteData.y / atlasTexture.height;
  const uvWidth = spriteData.width / atlasTexture.width;
  const uvHeight = spriteData.height / atlasTexture.height;

  // Looge sprite'i jaoks verteksi ja UV-andmed
  const vertices = [
    x, y, // Verteks 1
    x + width, y, // Verteks 2
    x + width, y + height, // Verteks 3
    x, y + height  // Verteks 4
  ];

  const uvs = [
    uvX, uvY,          // UV 1
    uvX + uvWidth, uvY,  // UV 2
    uvX + uvWidth, uvY + uvHeight, // UV 3
    uvX, uvY + uvHeight // UV 4
  ];

  // Värskendage sprite-andmetega verteksi ja UV-puhvreid
  // Siduge tekstuur ja joonistage sprite
}

            

              
                Copy
              
            
          

Praktilised kaalutlused

Tekstuuride atlasde kasutamisel pidage meeles järgmisi kaalutlusi:

• Padi: Lisage tekstuuride vahele padi, et vältida lekkimisartefakte. Lekkimine toimub, kui atlas olevad külgnevad tekstuurid "lekkivad" üksteisesse tekstuurifiltreerimise tõttu. Tavaliselt piisab väikesest kogusest padjast (nt 1–2 pikslit).
• Kahekordne suurusjärkude tekstuurid: Veenduge, et teie tekstuuride atlas oleks kahekordse suurusjärgu mõõtmetega (nt 256x256, 512x512, 1024x1024). Kuigi WebGL 2 toetab kahekordse suurusjärgu mittekujulisi tekstuure kergemini kui WebGL 1, võib kahekordse suurusjärgu tekstuuride kasutamine siiski parandada jõudlust ja ühilduvust, eriti vanemal riistvaral.
• Tekstuurifiltreerimine: Valige sobivad tekstuurifiltreerimisseaded (nt gl.LINEAR, gl.NEAREST, gl.LINEAR_MIPMAP_LINEAR). Lineaarne filtreerimine võib aidata tekstuure siluda, samas kui lähima naabri filtreerimine võib säilitada teravad servad.
• Tekstuuride tihendamine: Kaaluge tekstuuride tihendamistehnikate (nt ETC1, PVRTC, ASTC) kasutamist oma tekstuuride atlasde suuruse vähendamiseks. Tihendatud tekstuurid laadivad kiiremini ja tarbivad vähem mälu.
• Atlase suurus: Kuigi suuremad atlasd võimaldavad rohkem tekstuure ühe joonistuskutse kohta, võivad liiga suured atlasd tarbida palju mälu. Tasakaalustage vähendatud joonistuskutsete eelised atlase mälukasutusega. Optimaalse atlase suuruse leidmiseks rakenduse jaoks katsetage.
• Värskendused: Kui teie tekstuuride atlase sisu vajab dünaamilist muutmist (nt tegelaskuju kohandamiseks), võib kogu atlase värskendamine olla kulukas. Kaaluge dünaamilise tekstuuride atlase kasutamist või sageli muutuva sisuga tekstuuride eraldi atlasdeks jaotamist.
• Mipmapid: Genereerige tekstuuride atlasde jaoks mipmapid, et parandada renderdamise kvaliteeti erinevatel kaugustel. Mipmapid on eelarvestatud, madalama resolutsiooniga versioonid tekstuurist, mida kasutatakse automaatselt, kui tekstuuri vaadatakse kaugelt.

Täiustatud tehnikad

Põhitõdedest kaugemale jäädes on siin mõned tekstuuride atlasdega seotud täiustatud tehnikad:

• Dünaamilised tekstuuride atlasd: Need atlasd võimaldavad teil tekstuure tööajal lisada ja eemaldada. Need on kasulikud rakenduste puhul, kus tekstuurinõuded muutuvad sageli, näiteks mängudes, millel on protseduuriline sisu või kasutaja loodud sisu.
• Mitme tekstuuriga atlas: Mõnel juhul peate kasutama mitut tekstuuride atlas, kui ületate graafikakaardi poolt kehtestatud maksimaalse tekstuurisuuruse piirangu.
• Normaalne kaart atlasd: Saate luua eraldi tekstuuride atlasid normaalsetele kaartidele, mida kasutatakse pinna detailide simuleerimiseks.
• Andmepõhine tekstuuride pakkimine: Projekteerige oma tekstuuride pakkimisprotsess andmepõhise lähenemise ümber. See võimaldab paremat varade haldust ja taaskasutamist erinevates projektides. Kaaluge tööriistu, mis integreeruvad otse teie sisutorustikuga.

Järeldus

Tekstuuride atlasd on võimas optimeerimistehnika WebGL-rakenduste jaoks. Pakkides mitu tekstuuri üheks pildiks, saate oluliselt vähendada joonistuskutseid, parandada jõudlust ja lihtsustada varade haldust. Õige tekstuuride pakkimisalgoritmi valimine, sobivate tööriistade kasutamine ja praktiliste rakendamise üksikasjade arvesse võtmine on hädavajalikud, et maksimeerida tekstuuride atlasde kasu. Kuna WebGL jätkuvalt areneb, jääb tekstuuride atlasde mõistmine ja kasutamine esiotsa arendajate jaoks kriitilise tähtsusega oskuseks, kes soovivad luua kõrge jõudlusega ja visuaalselt atraktiivseid veebikogemusi. Selle tehnika valdamine võimaldab luua keerukamaid ja visuaalselt rikkalikumaid WebGL-rakendusi, surudes piire sellele, mis on brauseris võimalik.

Olenemata sellest, kas arendate 2D-mängu, 3D-simulatsiooni või andmevisualiseerimise rakendust, aitavad tekstuuride atlasd teil avada WebGL-i täieliku potentsiaali ja pakkuda sujuvat ja reageerivat kasutajakogemust ülemaailmsele publikule mitmesuguste seadmete ja võrgutingimustega.